<template>
  <div id="user">
    <van-nav-bar left-arrow>
      <template #left>
        <van-icon name="setting-o" size="18" @click="settingHandle" />
      </template>
      <template #right>
        <van-icon name="envelop-o" size="18" />
      </template>
    </van-nav-bar>
    <div id="personCard">
      <div class="leftImg">
        <van-image
          round
          width="5rem"
          height="5rem"
          fit="fill"
          :src="this.iconImg"
          @click="bigImg"
        />
      </div>
      <div id="rightWords">
        {{ this.username }}
        <label for="" class="rightWord" @click="showPersonPage"
          >个人主页<van-icon name="arrow"
        /></label>
      </div>
      <!-- <div class="base">
      金币：
    </div>
    <div>关注数：</div><div>粉丝数：</div> -->
    </div>
    <van-grid>
      <van-grid-item icon="todo-list" text="我的发布" @click="published" />
      <van-grid-item icon="comment" text="我的影评" @click="commented" />
      <van-grid-item icon="friends" text="我的好友" @click="myFriends" />
      <van-grid-item icon="star" text="我的收藏" @click="collection" />
    </van-grid>
  </div>
</template>

<script>
import axios from "axios";
import { ImagePreview } from "vant";
export default {
  data() {
    return {
      username: localStorage.getItem("username"),
      iconImg: "",
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    settingHandle() {
      this.$router.push({ name: "Setting" });
    },
    showPersonPage() {
      this.$router.push({
        name: "PersonPage",
        params: { username: this.username },
      });
    },
    getInfo() {
      axios
        .get(
          `http://localhost:8888/user/info?username=${localStorage.getItem(
            "username"
          )}`
        )
        .then((res) => {
          console.log(res);
          this.iconImg = res.data[0].user_face;
        });
    },
    published() {
      this.$router.push({ name: "myPublished" });
    },
    myFriends() {
      this.$router.push({ name: "myFriends" });
    },
    commented() {
      this.$router.push({ name: "myComment" });
    },
    collection() {
      this.$router.push({ name: "myCollection" });
    },
    bigImg() {
      ImagePreview([this.iconImg]);
    },
  },
};
</script>

<style>
.van-image {
  display: inline-block;
}
.van-nav-bar {
  background-color: beige;
}
#personCard {
  width: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
}
#words {
  display: inline-block;
  width: 200px;
}
.rightWord {
  display: inline-block;
  text-align: right !important;
}
.base {
  margin: 10px;
}
</style>
